feat(changelog): refresh CLI + web changelogs, Mintlify-style timeline#142
Conversation
The Testimonials section was light (#f3f3f2) sitting between black sections, with four from-black edge gradients darkening its edges — it looked off. - Convert to a charcoal dark section (#161618): recolor heading/subtext to light, flip the grid lines + vignettes to a light tint so they stay visible, update the marquee fade masks to the new bg. White cards kept. - Replace the four hard from-black edge gradients with two soft top/ bottom fades at z-[5] (under the content) that blend the section into the neighbouring black sections without darkening the heading or cards.
- CLI changelog: add the v2.0 releases (0.2.0 / 0.2.1 / 0.2.2). 0.2.0 is marked with a new `pivot` tag — it explains the reset from the legacy 1.x Python tool to the deterministic v2.0 rebuild. - Web changelog: add web-1.2.0 / 1.3.0 / 1.4.0 from the commit history since web-1.1.0 (status page + changelog tabs, blog launch, marketing redesign + research). - Redesign the changelog page as a vertical timeline (Mintlify-style): sticky version label on the left rail, a node on the connecting line, release content to the right. The pivot entry gets a rose-tinted node.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
type:refactor
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
📝 WalkthroughWalkthroughThe PR redesigns the Changelog component to display entries as a vertical timeline with left-rail labels and connecting lines. Changelog data is extended with a new ChangesChangelog Timeline Redesign
Testimonials Dark Theme
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
👋 Thanks for opening this pull request! A maintainer will review it soon. Please make sure all CI checks pass. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Changelog.tsx`:
- Around line 97-109: The collapse toggle button doesn't expose ARIA
state/association; update the button rendered in Changelog (the one using
toggle(si), ChevronRight, isExpanded, and section.label) to include
aria-expanded={isExpanded} and aria-controls pointing to the collapsible panel's
id, and ensure the corresponding collapsible panel element (the section content
rendered elsewhere for this section) has that same unique id and an appropriate
role/aria-labelledby or role="region" for screen readers to associate the
control with its panel; keep the existing toggle(si) behavior and generated id
strategy consistent (e.g., derive id from section.id/si) so both button and
panel reference the same identifier.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 57ad283a-3fa0-4978-857f-930754701e30
📒 Files selected for processing (4)
src/components/Changelog.tsxsrc/components/TestimonialsSection.tsxsrc/data/changelog.tssrc/data/webChangelog.ts
| <button | ||
| onClick={() => toggle(si)} | ||
| className="group mb-0 flex items-center gap-1.5 text-xs font-medium text-neutral-500 transition-colors hover:text-neutral-300" | ||
| > | ||
| <ChevronRight | ||
| className={`h-3.5 w-3.5 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`} | ||
| /> | ||
| <span> | ||
| {isExpanded | ||
| ? section.label | ||
| : `${section.label} / Housekeeping...`} | ||
| </span> | ||
| </button> |
There was a problem hiding this comment.
Add ARIA state/association to collapsible sections.
The toggle button should expose expansion state and control target (aria-expanded, aria-controls) so screen readers can interpret the section behavior.
Suggested patch
{entry.sections.map((section, si) => {
const isCollapsible = section.collapsible;
const isExpanded = expandedSections[si] ?? false;
+ const panelId = `section-panel-${entry.version}-${si}`;
+ const buttonId = `section-button-${entry.version}-${si}`;
return (
<div key={si}>
{isCollapsible ? (
/* Collapsible section */
<div>
<button
+ id={buttonId}
+ aria-expanded={isExpanded}
+ aria-controls={panelId}
onClick={() => toggle(si)}
className="group mb-0 flex items-center gap-1.5 text-xs font-medium text-neutral-500 transition-colors hover:text-neutral-300"
>
...
{isExpanded && (
<motion.div
+ id={panelId}
+ role="region"
+ aria-labelledby={buttonId}
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}Also applies to: 111-131
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Changelog.tsx` around lines 97 - 109, The collapse toggle
button doesn't expose ARIA state/association; update the button rendered in
Changelog (the one using toggle(si), ChevronRight, isExpanded, and
section.label) to include aria-expanded={isExpanded} and aria-controls pointing
to the collapsible panel's id, and ensure the corresponding collapsible panel
element (the section content rendered elsewhere for this section) has that same
unique id and an appropriate role/aria-labelledby or role="region" for screen
readers to associate the control with its panel; keep the existing toggle(si)
behavior and generated id strategy consistent (e.g., derive id from
section.id/si) so both button and panel reference the same identifier.
There was a problem hiding this comment.
Pull request overview
Refreshes the public changelog data and redesigns the changelog page into a vertical timeline, while also including a landing-page testimonials visual theme adjustment.
Changes:
- Adds newer CLI and Web App changelog entries.
- Adds a
pivotchangelog tag for the CLI versioning reset. - Reworks changelog entries from cards into a timeline layout.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
src/data/webChangelog.ts |
Adds Web App changelog entries for recent releases. |
src/data/changelog.ts |
Adds CLI release entries and extends changelog tags with pivot. |
src/components/Changelog.tsx |
Replaces changelog cards with timeline-style entries and pivot styling. |
src/components/TestimonialsSection.tsx |
Changes testimonials section styling from light to dark. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| { | ||
| label: 'Deterministic engine', | ||
| description: | ||
| 'Refactron 2.0 is rebuilt as a 100% deterministic AST engine — no LLM touches your code. It supersedes the original Python-implemented 1.x line.', |
| <section | ||
| id="testimonials" | ||
| className="relative w-full overflow-hidden bg-[#f3f3f2] py-24 lg:py-28 text-neutral-900 antialiased font-space" | ||
| className="relative w-full overflow-hidden bg-[#161618] py-24 lg:py-28 text-neutral-200 antialiased font-space" |
| <motion.div | ||
| initial={{ opacity: 0, y: 12 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.4, delay: 0.1 }} | ||
| className="flex gap-1 mb-10 p-1 rounded-xl bg-white/[0.04] border border-white/[0.08] w-fit" | ||
| className="flex gap-1 mb-12 p-1 rounded-xl bg-white/[0.04] border border-white/[0.08] w-fit" |
| <button | ||
| onClick={() => toggle(si)} | ||
| className="group mb-0 flex items-center gap-1.5 text-xs font-medium text-neutral-500 transition-colors hover:text-neutral-300" |
Refreshes both changelog streams and redesigns the changelog page.
CLI Package changelog (
src/data/changelog.ts)Added the v2.0 releases —
0.2.2,0.2.1,0.2.0— sourced from the repo CHANGELOG.0.2.0carries a newpivottag: it explains the reset from the legacy 1.x Python tool to the deterministic v2.0 TypeScript rebuild, so the0.2.0-after-1.0.15ordering reads sensibly.Web App changelog (
src/data/webChangelog.ts)Added
web-1.2.0/web-1.3.0/web-1.4.0from the commit history sinceweb-1.1.0— status page + changelog tabs (PR #130), blog launch (#131-#133), marketing redesign + research (#137-#139). Descriptions are grounded in the actual commit messages.Page redesign (
src/components/Changelog.tsx)Replaced the bordered cards with a Mintlify-style vertical timeline — a sticky version label on the left rail, a node on the connecting line, release content to the right. The pivot entry gets a rose-tinted node + line so it stands out where the v2.0 stream meets the legacy 1.x entries. New
pivottag style added.Verified:
tsc,eslint,prettier --checkall clean.Not visually verified — the site was not run locally; worth an
npm startpass on the timeline (especially the stickytop-28offset under the navbar).Summary by CodeRabbit
New Features
Style